@charset 'utf-8';
@import 'header';
@import 'footer';
@import 'rest';
@import 'toCart';

@mixin center{
	margin:{
		left: auto;
		right: auto;
	}
}

main{
	width: 100%;
	height: 800px;
	overflow: auto;
	position: relative;
	background-color: #f3f3f3;
	
	.sum-box{
		width: 70%;
		height: 114px;
		@include center;
		padding-top:10px ;
		background-color: white;
		// border: 1px solid;
		h3{
			.all{
				float: left;
				width: 15px;
				height: 15px;
				margin-left: 24px;
			}
			.my-cart{
				float:left;
				margin-left: 350px;
			}
			.continue{
				float:right;
				margin-right: 24px;
				font-size: 16px;
				color: #757575;
			}
		};
		
		.sum-price{
			width: 100%;
			height: 40px;
			float: left;
			margin-top: 10px;
			// border: 1px solid;
			// background-color: orchid;
			.zongjia{
				width: 65%;
				height: 100%;
				margin-left: 24px;
				float:left;
				background-color: white;
				.ZJ{
					width: 100%;
					height: 100%;
					line-height: 40px;
				}
			};
			
			.jiesuan{
				width: 30%;
				height: 100%;
				float:left;
				// margin-left: 24px;
				color: white;
				text-align: center;
				background-color: black;
				.JS{
					width: 100%;
					height: 100%;
					line-height: 40px;
				}
			}
		}
	}
	
	
	.shop-box{
		width: 70%;
		height: 350px;
		margin-top: 10px;
		@include center;
		background-color: white;
		border-radius: 15px;
		// border: 1px solid red;
		.shop-info{
			width: 100%;
			height: 250px;
			display: flex;
			justify-content: center;
			align-items: center;
			// border: 1px solid;
			.box-1{
				width: 95%;
				height: 230px;
				display: flex;
				justify-content: space-between;
				// border: 1px solid;
				.shop-img{
					width: 25%;
					height: 100%;
					// border: 1px solid #f3f3f3;
					border-radius: 15px;
					position: relative;
					// background-color: orange;
					img{
						width: 100%;
						height: 100%;
					}
					.check-btn{
						width: 20px;
						height: 20px;
						position: absolute;
						left:5px;
						top: 5px;
					}
				}
				.shop-info-box{
					width: 68%;
					height: 100%;
					// border: 1px solid #f3f3f3;
					position: relative;
					// background-color: lawngreen;
					.cancel{
						width: 15px;
						height: 15px;
						text-align: center;
						line-height: 15px;
						border-radius: 50%;
						color: white;
						display: block;
						background-color: rgba(139,117,0, 0.5);
						position: absolute;
						top:0px;
						right:0px;
						cursor:pointer;
					}
					p{
						color: #757575;
					}
					.select-box{
						width: 200px;
						height: 30px;
						margin-top: 30px;
						// border-radius: 15px;
						// border: 1px solid #757575;
						input{
							width: 30px;
							height: 30px;
							outline: none;
							border: none;
							text-align: center;
							border: 1px solid #757575;
							// border-radius: 15px;
						}
					};
					
					.price-box{
						width: 100%;
						height: 30px;
						margin-top: 10px;
						// border: 1px solid #757575;
						.price{
							color: #757575;
						}
						.now-price{
							float: right;
							margin-left: 20px;
						}
					}
				}
			}
			
		}
		.juan{
			width: 100%;
			height: 50px;
			margin-top: 10px;
			// border: 1px solid;
			.juan-add{
				width: 30%;
				height: 100%;
				margin-left: 2%;
				border: none;
				outline: none;
			}
			.ok-btn{
				float:right;
				margin-right: 2%;
				border: none;
				outline: none;
				height: 100%;
				background-color: white;
			}
		}
	};
	
	.shop-empty{
		width: 70%;
		height: 500px;
		margin-top: 10px;
		@include center;
		// background-color: white;
		border-radius: 15px;
		// border: 1px solid;
		background-image: url(/imgs/cart.jpg);
		background-size: 100% 100%;
		text-align: center;
		// display: none;
		a{
			width: 100px;
			height: 25px;
			border: 1px solid;
			
		}
	}
}